const svg = document.getElementById('orgChart');
const margin = 20;
 
function createNode(name, x, y) {
  const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
  g.classList.add('node');
  g.setAttribute('transform', `translate(${x}, ${y})`);
 
  const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
  rect.setAttribute('width', '120');
  rect.setAttribute('height', '30');
  rect.setAttribute('rx', '5');
  rect.setAttribute('ry', '5');
  g.appendChild(rect);
 
  const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
  text.textContent = name;
  text.setAttribute('x', '1');
  text.setAttribute('y', '20');
  text.setAttribute('text-anchor', 'start');
  g.appendChild(text);
 
  svg.appendChild(g);
  g.onclick = () => alert(`You clicked ${name}!`);
}
 
createNode('CEO', margin, margin);
createNode('CTO', margin, margin + 50);
createNode('Manager', margin + 130, margin + 50);